<template>
	<div style="padding-bottom: 100px;">
		<view style="background-color: #ffffff;margin: 10px;border-radius: 12px;padding: 15px;">
			<uni-forms ref="form" :modelValue="formData" labelWidth="90px">
				<uni-forms-item label="人员名称" name="name" required>
					<uni-easyinput type="text" v-model="formData.name" placeholder="请输入人员名称" />
				</uni-forms-item>
				<uni-forms-item label="所在部门" required>
					<uni-data-select v-model="formData.department" :localdata="department" style="background-color: white;" />
				</uni-forms-item>
				<uni-forms-item label="职务">
					<uni-easyinput type="text" v-model="formData.duty" placeholder="请输入职务" />
				</uni-forms-item>
				<uni-forms-item label="联系电话">
					<uni-easyinput type="number" v-model="formData.phone" placeholder="请输入联系电话" />
				</uni-forms-item>
				<uni-forms-item label="电子邮箱">
					<uni-easyinput type="text" v-model="formData.email" placeholder="请输入电子邮箱" />
				</uni-forms-item>
				<uni-forms-item label="所在地址" name="address" required>
					<uni-data-picker placeholder="请选择地址" popup-title="请选择所在地区" :localdata="dataTree"
						style="background-color: white;" v-model="formData.address">
					</uni-data-picker>
					<view style="margin-top: 20px;">
						<uni-easyinput  type="text"
							v-model="formData.addressDetail" placeholder="请输入详细地址" />
					</view>
				</uni-forms-item>
				<uni-forms-item label="手机账号" required>
					<uni-easyinput type="number" v-model="formData.phoneAccount" placeholder="请输入手机账号" />
				</uni-forms-item>
				<uni-forms-item label="角色范围">
					<uni-data-select v-model="formData.roleRange" :localdata="roleRange" style="background-color: white;" />
				</uni-forms-item>
				<uni-forms-item label="状态" required>
					<uni-data-select v-model="formData.state" :localdata="state" style="background-color: white;" />
				</uni-forms-item>
				<uni-forms-item label="备注" name="email">
					<uni-easyinput type="textarea" v-model="formData.node" placeholder="人员相关备注说明" />
				</uni-forms-item>
			</uni-forms>
		</view>
		<button hover-class="buttonHover" type="primary" 
			style="color:#ffffff;background-color:#bf5f09;width: 100px;font-size: 15px;">确定新增</button>
	</div>
</template>

<script>
	export default {
		data() {
			return {
				formData: {
					name: '',
					department: '',
					duty: '',
					phone: '',
					email: '',
					address: '',
					addressDetail: '',
					phoneAccount: '',
					roleRange:'',
					state:'',
					node:''
				},
				//下拉框 ->所在部门
				department: [{
						value: 0,
						text: "篮球"
					},
					{
						value: 1,
						text: "足球"
					},
					{
						value: 2,
						text: "游泳"
					},
				],
				//地区下拉框
				dataTree: [{
						text: "广东省",
						value: "1-0",
						children: [{
								text: "广州市",
								value: "1-1"
							},
							{
								text: "深圳市",
								value: "1-2"
							}
						]
					},
					{
						text: "贵州省",
						value: "2-0",
						children: [{
								text: "贵阳市",
								value: "2-1"
							},
							{
								text: "花溪区",
								value: "2-2"
							}
						]
					}
				],
				//下拉框 ->角色范围
				roleRange: [{
						value: 0,
						text: "篮球"
					},
					{
						value: 1,
						text: "足球"
					},
					{
						value: 2,
						text: "游泳"
					},
				],
				//下拉框 ->状态
				state: [{
						value: 0,
						text: "篮球"
					},
					{
						value: 1,
						text: "足球"
					},
					{
						value: 2,
						text: "游泳"
					},
				],
			}
		},
	}
</script>

<style scoped>
	::v-deep .file-title[data-v-363ace0e] {
		font-size: 12px;
		color: #333;
	}
	.buttonHover {
		opacity: 0.6;
	}
</style>